import CodeBlock from "../../../component/CodeBlock";
import { code } from "./codeData";

function Jsx() {
    return (<div className="tab-pane">
        <h1>JSX语法</h1>
        <p>JSX是一种JavaScript的语法扩展，它允许你在JavaScript代码中编写类似HTML的代码。React使用JSX来描述UI的外观。</p>

        <h3>JSX的基本语法</h3>
        <CodeBlock code={code.jsx1}></CodeBlock>

        <h3>在JSX中使用JavaScript表达式</h3>
        <p>在JSX中，你可以使用花括号 { } 来嵌入JavaScript表达式。</p>
        <CodeBlock code={code.jsx2}></CodeBlock>

        <h3>JSX中的属性</h3>
        <p>在JSX中，属性可以使用引号指定为字符串值，也可以使用花括号嵌入JavaScript表达式。</p>
        <CodeBlock code={code.jsx3}></CodeBlock>
    </div>);
}

export default Jsx;